<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" :leftIconSize="0" :fixed="true" bgColor="transparent" title="我的">
        </u-navbar>
        
        <!-- 顶部背景 -->
        <view class="profile-bg">
            <image src="../../static/icon/profile-bg.png" mode="aspectFill" class="bg-image"></image>
        </view>
        
        <!-- 用户信息 -->
        <view class="user-info-container">
            <view class="user-avatar" @click="jump('/pages/base_info/base_info',1)">
                <image :src="userinfo.avatar || '/static/images/avatar.jpg'" mode="aspectFill" class="avatar-image"></image>
            </view>
            
            <view class="user-details" @click="jump('/pages/base_info/base_info',1)">
                <view class="username">{{userinfo.nickname || '张大明'}}</view>
                <view class="user-phone">
                    <text>{{userinfo.mobile || '16665555555'}}</text>
                </view>
            </view>
            
            <view class="settings-btn" @click="jump('/pages/settings/settings',0)">
                <image src="../../static/icon/settings.png" mode="aspectFill"></image>
            </view>
        </view>
        
        <!-- 用户统计 -->
        <view class="stats-container">
            <view class="stat-item" @click="jump('/pages/my_collection/my_collection',1)">
                <view class="stat-number">{{userinfo.collection_count || 0}}</view>
                <view class="stat-label">收藏</view>
            </view>
            
            <view class="stat-item" @click="jump('/pages/my_focus/my_focus',1)">
                <view class="stat-number">{{userinfo.focus_count || 16}}</view>
                <view class="stat-label">关注</view>
            </view>
            
            <view class="stat-item" @click="jump('/pages/my_browse/my_browse',1)">
                <view class="stat-number">{{userinfo.view_count || 0}}</view>
                <view class="stat-label">浏览数</view>
            </view>
            
            <view class="stat-item" @click="jump('/pages/my_fans/my_fans',1)">
                <view class="stat-number">{{userinfo.fans_count || 0}}</view>
                <view class="stat-label">粉丝</view>
            </view>
            
            <view class="stat-item" @click="jump('/pages/home_page/home_page?tab=forum',1)">
                <view class="stat-number">{{userinfo.forum_count || 0}}</view>
                <view class="stat-label">帖子</view>
            </view>
        </view>
        
        <!-- 我的交易 -->
        <view class="section-container">
            <view class="section-title">我的交易</view>
            
            <view class="function-row">
                <view class="function-item" @click="jump('/pages/my_buy/my_buy',1)">
                    <view class="function-icon">
                        <image src="../../static/icon/mine_trade3.png" mode="aspectFill"></image>
                    </view>
                    <view class="function-name">我买到的</view>
                </view>
                
                <view class="function-item" @click="jump('/pages/my_sale/my_sale',1)">
                    <view class="function-icon">
                        <image src="../../static/icon/mine_trade2.png" mode="aspectFill"></image>
                    </view>
                    <view class="function-name">我卖出的</view>
                </view>
                
                <view class="function-item" @click="jump('/pages/my_unused/my_unused',1)">
                    <view class="function-icon">
                        <image src="../../static/icon/mine_trade1.png" mode="aspectFill"></image>
                    </view>
                    <view class="function-name">我闲置的</view>
                </view>
            </view>
        </view>
        
        <!-- 我的互动 -->
        <view class="section-container">
            <view class="section-title">我的互动</view>
            
            <view class="interaction-item" @click="jump('/pages/home_page/home_page?tab=forum',1)">
                <view class="interaction-details">
                    <view class="interaction-title">我的帖子</view>
                    <view class="interaction-count">6条帖子</view>
                </view>
                <view class="interaction-icon">
                    <image src="../../static/icon/mine_interaction1.png" mode="aspectFill"></image>
                </view>
            </view>
        </view>
        
        <!-- 底部广告横幅 -->
        <view class="banner-ad">
            <!-- <image src="../../static/images/bg3.png" mode="aspectFill"></image> -->
			<image :src="bannerList[0]['thumb_image']" mode="aspectFill"></image>
        </view>
        
		<!-- <swiper autoplay circular class="xilu_banner">
		    <swiper-item class="swiper-item" v-for="(item,index) in bannerList">
		        <view class="swiper-item">
		            <image :src="item.thumb_image" mode="aspectFill"></image>
		        </view>
		    </swiper-item>
		</swiper> -->
		
		
		
        <Footer :footState="4" :num="messageCount"></Footer>
    </view>
</template>

<script>
    import Footer from "@/components/footer/footer.vue";
	const chatIM = require('../../xilu/chat.js');
    export default {
        components: {
            Footer,
        },
        data() {
            return {
				userinfo1: {
                    nickname: '张大明',
                    mobile: '16665555555',
                    avatar: '/static/images/avatar.jpg',
                    collection_count: 0,
                    focus_count: 16,
                    view_count: 0,
                    fans_count: 0,
                    forum_count: 0,
                    buy_order_count: 0,
                    sale_order_count: 0,
                    sale_product_count: 0,
                    recovery_count: 0,
                    topic_count: 6
                },
				
			   userinfo:{},
				messageCount: 2,
				 bannerList: [],
            };
        },
		onLoad() {
			let page = this;
			uni.$on("unread_count",function(data){
				page.messageCount = getApp().globalData.chat_config.messageCount
			});
			if (getApp().globalData.chat_config.SocketTask) {
			   chatIM.setMessageBadge(false)
			}
			if(this.$core.getUserinfo()) {
				this.getUserinfo();
			}
			uni.$on("user_update",function(){
				page.getUserinfo();
			})
			this.fetchBanner();
		},
		onUnload() {
			uni.$off("unread_count");
			uni.$off("user_update");
		},
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
		methods:{
			//轮播图
			fetchBanner() {
			    this.$core.get({
			        url: 'xilumarket.banner/banners',
			        data: {
			            group: 'mine'
			        },
			        loading: false,
			        success: ret => {
			            this.bannerList = ret.data;
			        }
			    })
			},
			getUserinfo(){
				
				this.$core.post({url: 'xilumarket.user/info',data: {},loading: false,success: ret => {
						this.userinfo = ret.data;
					},fail: err => {
						console.log(err);
					}
				});
				
			},
			jump(url,needLogin){
				if(needLogin){
					if(!this.$core.getUserinfo(true)){
						return true;
					}
				}
				uni.navigateTo({
					url: url
				})
			}
		}
    }
</script>

<style lang="scss" scoped>
    .xilu {
        min-height: 100vh;
        background-color: #F8F8F8;
    }
    
    .profile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 450rpx;
        z-index: 0;
        
        .bg-image {
            width: 100%;
            height: 100%;
        }
    }
    
    .user-info-container {
        position: relative;
        display: flex;
        align-items: center;
        padding: 30rpx;
        margin-top: calc(var(--status-bar-height) + 80rpx);
        z-index: 1;
        
        .user-avatar {
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 30rpx;
            border: 4rpx solid #FFFFFF;
            
            .avatar-image {
                width: 100%;
                height: 100%;
            }
        }
        
        .user-details {
            flex: 1;
            
            .username {
                font-size: 42rpx;
                font-weight: bold;
                color: #333333;
                margin-bottom: 10rpx;
            }
            
            .user-phone {
                display: flex;
                align-items: center;
                font-size: 32rpx;
                color: #666666;
            }
        }
        
        .settings-btn {
            width: 80rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            margin-left: 10rpx;
            
            image {
                width: 40rpx;
                height: 40rpx;
            }
        }
    }
    
    .stats-container {
        margin: 30rpx 30rpx 0;
        display: flex;
        justify-content: space-between;
        background-color: #FFFFFF;
        border-radius: 20rpx;
        padding: 30rpx 10rpx;
        box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
        z-index: 2;
        position: relative;
        
        .stat-item {
            flex: 1;
            text-align: center;
            
            .stat-number {
                font-size: 38rpx;
                font-weight: bold;
                color: #333333;
                margin-bottom: 10rpx;
            }
            
            .stat-label {
                font-size: 28rpx;
                color: #999999;
            }
        }
    }
    
    .section-container {
        margin: 30rpx 30rpx 0;
        background-color: #FFFFFF;
        border-radius: 20rpx;
        padding: 30rpx;
        box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
        
        .section-title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 30rpx;
        }
    }
    
    .function-row {
        display: flex;
        justify-content: space-around;
        
        .function-item {
            text-align: center;
            
            .function-icon {
                width: 100rpx;
                height: 100rpx;
                border-radius: 20rpx;
                background-color: #F5F7FA;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto 15rpx;
                
                image {
                    width: 50rpx;
                    height: 50rpx;
                }
            }
            
            .function-name {
                font-size: 28rpx;
                color: #333333;
            }
        }
    }
    
    .interaction-item {
        display: flex;
        align-items: center;
        background-color: #F5F7FA;
        padding: 30rpx;
        border-radius: 15rpx;
        width: 45%;
        margin: 0;
        margin-left: 0;
        
        .interaction-details {
            flex: 1;
            
            .interaction-title {
                font-size: 32rpx;
                font-weight: 500;
                color: #333333;
                margin-bottom: 10rpx;
            }
            
            .interaction-count {
                font-size: 26rpx;
                color: #999999;
            }
        }
        
        .interaction-icon {
            width: 80rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            
            image {
                width: 50rpx;
                height: 50rpx;
            }
        }
    }
    
    .banner-ad {
        margin: 30rpx;
        border-radius: 20rpx;
        overflow: hidden;
        height: 400rpx;
        
        image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
</style>
